<script setup>
import { ref } from 'vue'
import AMap from '@/components/AMap/AMap.vue';// 地图加载完成回调函数
import api from '@/api/index.js'

const props = defineProps({
  deviceNo: {
    type: [Number, String],
    default: ''
  }
})

let curMap = null
let curAMap = null
const mapInit = (AMap, map) => {
  curMap = map
  curAMap = AMap
}

const pickDate = ref([])

const search = async () => {
  const { data } = await api.getMachineRunLine({
    deviceId: props.deviceNo,
    startTime: pickDate.value?.[0] ?? '',
    endTime: pickDate.value?.[1] ?? '',
  })
  let object3Dlayer = new curAMap.Object3DLayer({ zIndex: 400, map: curMap });
  let line = new curAMap.Object3D.ThinLine({
    path: data.map(item => (new curAMap.LngLat(item.longitude / 1000000, item.latitude / 1000000))),
    color: '#ff0000'
  });
  object3Dlayer.add(line)
  // 用于移动地图视角
  curMap.setFitView([new curAMap.Polygon({
    path: data.map(item => (new curAMap.LngLat(item.longitude / 1000000, item.latitude / 1000000))),
    map: curMap,
    strokeOpacity: 0,
    fillOpacity: 0,
    bubble: true
  })])
}
</script>

<template>
  <div style="margin-bottom: 10px;">
    <a-range-picker v-model:value="pickDate" show-time valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
    <a-button type="primary" style="margin-left: 15px;" @click="search">查询</a-button>
  </div>
  <div style="width: 100%;height: 600px;border-radius: 8px;overflow: hidden;">
    <AMap :mapInit="mapInit" class="com-full" />
  </div>
</template>